<template>
  <div class="o-a">
    <Page-title :title="title" />
    <div class="f f-ai-c f-jc-c p20">
      <div>
        <div class="PTH-One p20">
          <div class="PTH-title font24">{{ data1.title }}</div>
          <div v-if="data1.data && data1.data.length" class="target font13 mt6">
            目标值({{ data1.data[0].data[1] }}%)
          </div>
          <Line-chart
            v-if="data1.data && data1.data.length"
            :cid="data1.id"
            :x-axis="data1.xlist"
            :data="data1.data"
            :type="['bar', 'line', 'line']"
            :legend="false"
            :tooltip="false"
            grid-top="15%"
            grid-bottom="13%"
            smooth
            bar-width="60%"
            :bar-label="[true, false]"
            :colors="[
              ['#F63F3F', '#F63F3F'],
              ['#FFFE54', '#FFFE54'],
              ['#F928F6', '#F928F6'],
            ]"
            dot-colors="#fff"
            :limit-colors="['#30C27C', '#30C27C']"
          />
          <Empty v-else />
        </div>
        <div class="PTH-Two p22">
          <div class="PTH-title font24">{{ data3.title }}</div>
          <div class="PTH-con g g4">
            <div class="PTH-box m22" v-for="(i, k) in data3.data" :key="k">
              <div class="m9 font14">{{ i.name || "" }}</div>
              <div class="m6 ml14 font28 tc">{{ i.value || 0 }}％</div>
              <div class="m12 ml25 font12 cf">
                规格范围：{{ i.scale || "-" }}
              </div>
            </div>
          </div>
        </div>
        <div class="g g2 gap23">
          <div class="PTH-Three g g2 p24">
            <div class="PTH-title font24">{{ data4.title }}</div>
            <div class="PTH-box m18" v-for="(i, k) in data4.data" :key="k">
              <div class="m9 font14">{{ i.name || "" }}</div>
              <div class="m6 tc font32">{{ i.value || 0 }}％</div>
              <div class="m8 ml25 font12 cf">
                规格范围：{{ i.scale || "-" }}
              </div>
            </div>
          </div>
          <div class="PTH-Three g g2 p24">
            <div class="PTH-title font24">{{ data5.title }}</div>
            <div class="PTH-box m18" v-for="(i, k) in data5.data" :key="k">
              <div class="m9 font14">{{ i.name || "" }}</div>
              <div class="m6 tc font32">{{ i.value || 0 }}％</div>
              <div class="m8 ml25 font12 cf">
                规格范围：{{ i.scale || "-" }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ml23">
        <div class="PTH-One f f-ai-c f-jc-s f-w p20">
          <div class="PTH-title font28">{{ data2.title }}</div>
          <div v-if="data2.data && data2.data.length" class="target font13 mt6">
            目标值({{ data2.data[0].data[1] }}%)
          </div>
          <Line-chart
            v-if="data2.data && data2.data.length"
            :cid="data2.id"
            :x-axis="data2.xlist"
            :data="data2.data"
            :type="['bar', 'line', 'line']"
            bar-width="60%"
            :legend="false"
            :tooltip="false"
            grid-top="14%"
            grid-bottom="12%"
            smooth
            :bar-label="[true, false]"
            :colors="[
              ['#F63F3F', '#F63F3F'],
              ['#FFFE54', '#FFFE54'],
              ['#F928F6', '#F928F6'],
            ]"
            dotColors="#fff"
            :limit-colors="['#30C27C', '#30C27C']"
          />
          <Empty v-else />
        </div>
        <div class="PTH-Two p20">
          <div class="PTH-title font24">{{ data6.title }}</div>
          <div class="PTH-con g g4">
            <div class="PTH-box m22" v-for="(i, k) in data6.data" :key="k">
              <div class="m9 font14">{{ i.name || "" }}</div>
              <div class="m6 ml70 font32">{{ i.value || 0 }}％</div>
              <div class="m8 ml25 font12 cf">
                规格范围：{{ i.scale || "-" }}
              </div>
            </div>
          </div>
        </div>

        <div class="g g3 gap24">
          <div class="PTH-Four f f-ai-c f-jc-c">
            <div class="PTH-title font24">{{ data7.title }}</div>
            <div class="PTH-box" v-for="(i, k) in data7.data" :key="k">
              <div class="m9 font14">{{ i.name || "" }}</div>
              <div class="m6 ml70 font32">{{ i.value || 0 }}％</div>
              <div class="m8 ml25 font12 cf">
                规格范围：{{ i.scale || "-" }}
              </div>
            </div>
          </div>
          <div class="PTH-Four f f-ai-c f-jc-c">
            <div class="PTH-title font24">{{ data8.title }}</div>
            <div class="PTH-box" v-for="(i, k) in data8.data" :key="k">
              <div class="m9 font14">{{ i.name || "" }}</div>
              <div class="m6 ml70 font32">{{ i.value || 0 }}％</div>
              <div class="m8 ml25 font12 cf">
                规格范围：{{ i.scale || "-" }}
              </div>
            </div>
          </div>
          <div class="PTH-Four f f-ai-c f-jc-c p24">
            <div class="PTH-title font24">{{ data9.title }}</div>
            <div class="PTH-box" v-for="(i, k) in data9.data" :key="k">
              <div class="m9 font14">{{ i.name || "" }}</div>
              <div class="m6 ml70 font32">{{ i.value || 0 }}％</div>
              <div class="m8 ml25 font12 cf">
                规格范围：{{ i.scale || "-" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 左侧图表
    data1: {
      type: Object,
      default: () => {
        return {
          id: "chart-1",
          title: "",
          xlist: [],
          data: [],
        };
      },
    },
    // 右侧图表
    data2: {
      type: Object,
      default: () => {
        return {
          id: "chart-2",
          title: "",
          xlist: [],
          data: [],
        };
      },
    },
    // 数据3
    data3: {
      type: Object,
      default: () => {
        return {
          title: "",
          data: [],
        };
      },
    },
    // 数据4
    data4: {
      type: Object,
      default: () => {
        return {
          title: "",
          data: [],
        };
      },
    },
    // 数据5
    data5: {
      type: Object,
      default: () => {
        return {
          title: "",
          data: [],
        };
      },
    },
    // 数据6
    data6: {
      type: Object,
      default: () => {
        return {
          title: "",
          data: [],
        };
      },
    },
    // 数据7
    data7: {
      type: Object,
      default: () => {
        return {
          title: "",
          data: [],
        };
      },
    },
    // 数据8
    data8: {
      type: Object,
      default: () => {
        return {
          title: "",
          data: [],
        };
      },
    },
    // 数据9
    data9: {
      type: Object,
      default: () => {
        return {
          title: "",
          data: [],
        };
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
::v-deep ::-webkit-scrollbar {
  display: none !important;
}

.o-a {
  height: 1080px;
  background-color: #051735;
  background: url("~@/assets/img/bg.png");
}

.PTH-title {
  font-family: YouSheiBlack;
  color: #45f4ff;
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}

.PTH-One {
  width: 100%;
  height: 305px;
  background: url("../../../../assets/img/bg8.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  .target {
    margin-left: 10px;
    color: #fff;
    height: 20px;
    line-height: 20px;
    position: relative;
    &::before {
      content: "";
      width: 14px;
      height: 3px;
      background: #fffe54;
      display: inline-block;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
}

.PTH-Two {
  width: 100%;
  margin-top: 25px;
  height: 357px;
  background: url("../../../../assets/img/bg8.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .PTH-con {
    overflow-y: auto;
    width: 100%;
    max-height: 316px;
    background-size: 100% 100%;
    position: relative;
  }
}

.tc {
  text-align: center;
}

.PTH-Three {
  width: 450px;
  height: 205px;
  margin-top: 25px;
  background: url("../../../../assets/img/bg9.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.PTH-Four {
  width: 290px;
  margin-top: 25px;
  height: 205px;
  background: url("../../../../assets/img/bg10.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.PTH-box {
  width: 170px;
  height: 112px;
  background: url("../../../../assets/img/bg4.png") no-repeat;
  background-size: 100% 100%;
  color: #45f4ff;
}
.cf {
  color: #dbfaff;
}
</style>
